<template>
  <el-dialog
    title="订单详情"
    close-on-click-modal
    close-on-press-escape
    :visible.sync="visible"
  >
    <!-- <el-descriptions title="收件人信息">
      <el-descriptions-item label="邬剑飞">17671646490</el-descriptions-item>
      <el-descriptions-item>广东省深圳市南山区粤海路5号动漫园4栋7楼衣图数字科技深圳有限公司</el-descriptions-item>
    </el-descriptions> -->
    <h3>收件人信息</h3>
    <div>
      <span style="margin-right: 20rpx">{{ infoItem.name }}</span>
      <span>{{ infoItem.tel }}</span>
    </div>
    <div>
      <span>{{ infoItem.address }}</span>
    </div>
    <h3>订单信息</h3>
    <div>
      <span style="margin-right: 20rpx">订单号:</span>
      <span>{{ infoItem.reqsn }}</span>
    </div>
    <div>
      <span style="margin-right: 20rpx">创建时间:</span>
      <span>{{ infoItem.createTime }}</span>
    </div>
    <div>
      <span style="margin-right: 20rpx">订单金额:</span>
      <span>{{ infoItem.orderMoney }}</span>
    </div>
    <h3>付款信息</h3>
    <div>
      <span style="margin-right: 20rpx">付款方式:</span>
      <span>{{ infoItem.payType }}</span>
    </div>
    <div>
      <span style="margin-right: 20rpx">付款时间:</span>
      <span>{{ infoItem.payTime }}</span>
    </div>
    <div>
      <span style="margin-right: 20rpx">付款金额:</span>
      <span>{{ infoItem.payMoney }}</span>
    </div>
    <h3>配送信息</h3>
    <div v-if="infoItem.logisticsCompany">
      <span style="margin-right: 20rpx">物流公司:</span>
      <span>{{ infoItem.logisticsCompany }}</span>
    </div>
    <div  v-if="infoItem.logisticsOrderNo">
      <span style="margin-right: 20rpx">物流单号:</span>
      <span>{{ infoItem.logisticsOrderNo }}</span>
    </div>
    <div  v-if="infoItem.sendTime">
      <span style="margin-right: 20rpx">发货时间:</span>
      <span>{{ infoItem.sendTime }}</span>
    </div>
    <h3>商品信息</h3>
    <div
      v-for="(item, index) in infoItem.goodsList"
      :key="index"
      style="border: 1px solid #ddd; display: flex"
    >
      <div
        style="
          width: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
        "
      >
        <img
          style="width: 50px; height: 50px; margin-right: 20px"
          :src="item.image"
          alt=""
        />
       <div>
          <div >
          <span>{{ item.title }}</span>
          </div>
          <div style="color:#999;">
           spu：<span >{{ item.no}}</span>
          </div>
       </div>
      </div>
      <div style="width: 50%">
        <div
          v-for="(goods, number) in item.attributeList"
          :key="number"
          style="
            width: 100%;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #ddd;
          "
        >
          <img
            style="width: 50px; height: 50px; margin-right: 20px"
            :src="goods.image"
            alt=""
          />
          <div style="flex:1;padding-right:30px">
            <div>
              <span>颜色:</span><span>{{ goods.name }}</span>
            </div>
            <div style="display: flex; justify-content: space-between">
              <span>尺码:<span style="margin-right: 20px">{{ goods.value }}</span></span
              >
              <span style="margin-right: 20px">x {{ goods.count }}</span>
              <span>￥{{ item.selectionPrice* goods.count}}</span>
            </div>
            <div>
              <span>单价:</span><span>￥{{ item.selectionPrice}}/件</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      dataForm: {
        id: 0,
        payMoney: "",
      },
      dataRule: {
        payMoney: [
          { required: true, message: "请输入修改价格", trigger: "blur" },
        ],
      },
      infoItem: {},
    };
  },
  methods: {
    init(item) {
      console.log(item)
      // this.infoItem = item;
      if(item.orderInfo){
        this.dataForm.id = item.orderInfo.reqsn || 0
      }else{
        this.dataForm.id = item.reqsn || 0
      }
      console.log(this.dataForm.id )
      // this.dataForm.payMoney = item.payMoney
      this.visible = true;
      this.$nextTick(() => {
        if (this.dataForm.id) {
          this.$http({
            url: this.$http.adornUrl(`/admin/order/getOrderInfo`),
            method: 'get',
            params: this.$http.adornParams({
              reqsn:  this.dataForm.id
            })
          }).then(({data}) => {
            if (data && data.code === '200') {
              this.infoItem =data.data
              this.infoItem.goodsList.forEach((i,index)=> {
                i.countNum=0
                i.attributeList.forEach((item,index)=>{
                  i.countNum+=item.count
                })
              });
              console.log(this.infoItem)
            }
          })
        }
      })
    },
  },
};
</script>
